<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>品牌街</title>
	<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/css/SUI.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/all.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/app.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/app.css" rel="stylesheet" />
	<link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/swiper/css/swiper.min.css">
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/dropload.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css">
	<style type="text/css">
		.distribution {padding-top: 55px;}
		.head {position: fixed;top: 0;left: 0;width: 100%;height: 45px;padding: 0 45px;background-color: #fff;border-bottom: solid 1px #eee;z-index: 3;}
		.head .back {position: absolute;left: 0;width: 45px;height: 100%;line-height: 45px;text-align: center;font-size: 18px;font-weight: 800;}
		.head .search-wrap {position: relative;width: 100%;min-width: 200px;height: 32px;margin: 7px auto 0;font-size: 12px;}
		.head .search-wrap .iconfont {position: absolute;left: 5px;top: 0;line-height: 32px;color: #aaa;font-size: 14px;}
		.head .search {width: 100%;height: 100%;padding: 5px 5px 5px 24px;background-color: rgb(245,245,245);box-sizing: border-box;border-radius: 3px;text-align: left;font-size: 12px;}
		.nav-wrap {display: flex;flex-wrap: wrap;margin-top: 3px;}
		.nav-wrap span {flex: 1 0 21vw;max-width: 21vw;height: 38px;margin: 2vw;line-height: 38px;text-align: center;}
		.nav-wrap a {display: block;width: 100%;height: 100%;color: #666;box-sizing: border-box;border: 1px solid #eee;border-radius: 3px;background-color: #e54242;color: #eee;font-weight: 800;}
		.nav-wrap a.on {border: 1px solid #e54242; color: #e54242;background-color: #fff;}
		.banner-wrap {margin: 0 10px;max-height: 50vw;overflow: hidden;border-radius: 3px;}
		.banner-wrap img {width: 100%;}
		.content-wrap {background-color: #fafafa;display: flex; flex-wrap: wrap;}
		.content-wrap span {display: block;text-align: center;}
		.content {padding: 10px 0;border-top: 1px solid #eaeaea;}
		.clear:after {display: block;content: '\20';clear: both;height: 0;visibility: hidden;}
		.pic-wrap {width: calc(25vw - 15px);height: calc(25vw - 15px);overflow: hidden;border-radius: 3px;background-color: #fff;}
		.pic-wrap:nth-of-type(4n+1){margin-left: 12px}
		.pic-wrap img {position: relative;top: 50%;width: 100%;transform: translateY(-50%);}
		
		.intr-wrap {float: right;margin-left: 12px;width: calc(100% - 20vw - 12px);}
		.title span {line-height: 18px;font-weight: bold;color: #333;font-size: 16px;}
		.keyword {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;height: 38px;margin: 3px 0 5px;text-overflow: ellipsis;color: #999;}
		.keyword span {display: inline-block;}
		.explain {color: #999;}
		.img-wrapper {width: 100%;margin-right: -8px;}
		.img-wrap {position: relative;float: left;width: calc(25% - 6px);margin-right: 8px;background: #fff;padding-bottom: calc(25% - 6px);}
		.img-wrap:last-child {margin-right: 0;}
		.img-wrap img {position: absolute;width: 100%;top: 0;bottom: 0;margin: auto;}
		.swiper-container {height: 200px;}
		.swiper-container .swiper-slide {background-repeat: no-repeat;background-position: center;background-size: cover;}
	</style>
</head>
<body>
<div class="distribution hotselling ">
	<div class="head">
		<div class="back iconfont icon-fanhui1" onclick="location=location.origin+'/mobile/index'"></div>
		<div class="search-wrap">
			<span class="iconfont icon-search"></span>
			<input type="search" class="search" name="search" placeholder="搜索品牌">
		</div>
	</div>
	{{if .info.pathname}}
	<div class="banner-wrap">
		<img src="{{.info.pathname}}">
	</div>
	{{end}}
	{{if .info.images}}
	<div class="swiper-container">
		<div class="swiper-wrapper" id="slide">
			{{range $i,$v := .info.images}}
			<div class="swiper-slide" style="background-image: url({{$v}});"></div>
			{{end}}
		</div>
		<div class="swiper-pagination"></div>
	</div>
	{{end}}
	<div class="nav-wrap">
		<span><a href="/mobile/index/brandStreet" {{if eq .classifyId ""}}class="on"{{end}}>全部</a></span>
		{{range .classify}}
		<span><a href="/mobile/index/brandStreet?id={{.id}}&bid={{.bid}}" {{if eq .id $.classifyId}}class="on"{{end}}>{{.name}}</a></span>
		{{end}}
	</div>
	<div class="content-wrap">
		{{range .brand}}
		<div class="content clear">
			<a href="/mobile/column/search_result?bid={{.id}}">
				<div class="pic-wrap">
					<img src="{{.pathname}}">
				</div>
				<span>{{.name}}</span>
				<!-- <div class="intr-wrap">
					<div class="title">
						<span>{{.name}}</span>
					</div>
					<div class="keyword">
						{{range $i, $v := .keyword}}
						<span>{{$v}}</span>
						{{end}}
					</div>
					<div class="img-wrapper clear">
						{{range .products}}
						<div class="img-wrap">
							<a href="/mobile/column/product_content?id={{.id}}">
								<img src="{{.pathname}}">
							</a>
						</div>
						{{end}}
					</div>
				</div> -->
			</a>
		</div>
		{{end}}
	</div>
</div>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/other/app.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js?"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/swiper/js/swiper.min.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/dropload.min.js"></script>
<script>
	var page = 2;
	var swiper = new Swiper('.swiper-container', {
		pagination: '.swiper-pagination',
		paginationClickable: true,
		loop:true,
		autoplay:3500
	});
	var mySwiper = new Swiper('.topLine', {
		loop:true,
		autoplay:2000,
		paginationClickable: false,
		direction:'vertical'
	});
	$('.content-wrap').dropload({
	    scrollArea : window,
	    loadDownFn : function(me){
	        $.ajax({
	            type: 'GET',
	            url: window.location.href,
	            dataType: 'json',
	            data:{page:page},
	            success: function(data){
	            	var brand = data.brand
	                if (brand) {
	                	me.resetload();
	                	for (var i in brand) {
	                		var div = document.createElement("div");
	                		var html = ""
	                		var v = brand[i]
		                	html = `<div class="content clear">
										<a href="/mobile/column/search_result?bid=${v.id}">
											<div class="pic-wrap">
												<img src="${v.pathname}">
											</div>
											<span>${v.name}</span>`
											html +=	`</a></div>`
							// 				<div class="intr-wrap">
							// 					<div class="title">
							// 						<span>${v.name}</span>
							// 					</div>
							// 					<div class="keyword">
							// 		`
							// for (var j in v.keyword) {
							// 	html +=	`<span>${v.keyword[j]}</span>`
							// }
							// html +=	`</div>
							// 			<div class="img-wrapper clear">`
							// for (var k in v.products) {
							// 	html +=	`<div class="img-wrap">
							// 				<a href="/mobile/column/product_content?id=${v.products[k].id}">
							// 					<img src="${v.products[k].pathname}">
							// 				</a>
							// 			</div>`
											
							// }
							// html +=	`</div>
							// 		</div>
							// 	</a>
							// </div>`
							div.innerHTML = html
							$('.dropload-down').before(div)
							div = null
						}
	                	page++
	                	me.resetload();
	                }else{
	                    mui.toast("没有更多了！");
	                    $(".dropload-down").remove();
	                }
	            },
	            error: function(xhr, type){
	                mui.toast("网络慢，请重新刷新!");
	                me.resetload();
	            }
	        });
	    }
	});
	$('.search').keydown(function (events) {
            if (events.which == 13) {
            	var href = location.href;
            	var val = $(this).val();
            	if (/\?/.test(href)) {
            		location = href + '&search=' + encodeURIComponent(val)	
            	} else {
            		location = href + '?search=' + encodeURIComponent(val)	
            	}
            }
        });
</script> 
</body>
</html>